<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <style>
        .box1 {
            width: 60%;
            border: 1px solid darkorchid;
            border-radius: 10px;
            padding: 20px;
        }

        .router-link-exact-active,
        .router-link-active {
            color: deeppink;
            border: 1px solid deepskyblue;
            padding: 5px;
            border-radius: 5px;
            background: darkslateblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title }}</h2>
        <myhead></myhead>
        <!-- 5.路由出口  申明加载路由的地址 -->
        <router-view class="box1"></router-view>

        <!-- 6.路由导航  声明式导航 a -->
        <router-link to="/home">首页</router-link>
        <router-link :to="{name:'home'}"> 首页2</router-link>
        <router-link to="/find">发现</router-link>

        <router-link to="/news/1105/info/武汉?salary=12000">新闻-武汉</router-link>
        <!-- <router-link to="/news/1111/info?salary=18000">新闻-杭州</router-link> -->
        <router-link :to="{name:'news',params:{day:1111,address:'杭州'},query:{salary:18000}}">新闻杭州</router-link>

        <router-link to="/user/2110/zhansan?time=1005&age=18#day5">用户中心 -- zhansan</router-link>
        <!-- <router-link to="/user/2108/lesson?time=1111&age=33#day18">用户中心 -- 大雷</router-link> -->
        <router-link :to="{name:'user',params:{uid:2110,uname:'lishi'},query:{time:1010,age:36},hash:'#day09'} ">用户中心 --
            李四
        </router-link>
        <router-link :to="{name:'admin'}">管理员1</router-link>
        <router-link to="/user/10018/admin">管理员2</router-link>
    </div>
    <template id="head">
        <header>
            WH2110-DAYDAYUP
        </header>
    </template>

    <template id="home">
        <div>
            <h2>Home - Home - Home</h2>
        </div>
    </template>

    <template id="news">
        <div>
            <h2>News - News - 今日新闻 </h2>
            <h2>路由参数 $route.params </h2>
            <p>day -- {{$route.params.day}}</p>
            <p>address - {{$route.params.address || '北京'}}</p>
            <p>salary === {{$route.query.salary}}</p>
        </div>
    </template>

    <template id="user">
        <div>
            <h2>User - User - 用户中心</h2>
            <h1>$route 路由信息对象</h1>
            <p>路由参数 ： $route.params</p>
            <h2>uid == {{$route.params.uid}}</h2>
            <h2>uname == {{$route.params.uname}}</h2>
            <p>查询参数 ? $route.query </p>
            <p>time === {{$route.query.time }}</p>
            <p>age === {{$route.query.age }}</p>

            <p>路由名称 name : {{$route.name }}</p>
            <p>路由路径 path: {{$route.path }}</p>
            <p>路由hash : {{$route.hash }}</p>
            <p>路由的完整路径 : {{$route.fullPath}}</p>
            <p>路由的标记信息 meta : {{$route.meta.phone }}</p>
        </div>
    </template>


    <template id="find">
        <div>
            <h2>FInd - FInd - 发现美丽</h2>
        </div>

    </template>

</body>
<script>
    // 0.如果使用模块机制编程，导入Vue和VueRouter，要调用Vue.use（VueRouter）
    Vue.component("myhead", {
        template: "#head"
    })
    // 1.定义（路由）组件
    const Home = {
        template: "#home"
    }
    const News = {
        template: "#news"
    }
    const Find = {
        template: "#find"
    }
    const User = {
        template: "#user"
    }

    const NotFound = {
        template: "<h2>404 - 404 - NotFound </h2>"
    }
    // 2.定义路由   （定义路由里面组件和地址路径的映射关系）
    const routes = [
        {
            path: "/",
            redirect: {
                name: "home"
            }
        },
        {
            path: "/home",
            component: Home,
            name: "home", // 路由名称 命名路由
        },
        {
            path: "/news/:day/info/:address?",
            component: News,
            name: "news",
            meta: {

            }
        },
        {
            path: "/find",
            alias: "/pengyouquan", // 路由别名
            name: "find",
            component: Find
        },
        {
            path: "/user/10001/admin",
            component: {
                template: "<h1>管理员 - admin  - 10001 </h1>"
            },
            name: "admin",
        },
        {
            path: "/user/:uid/:uname?",
            component: User,
            name: "user",
            meta: {
                islogin: true,
                keep: true,
                phone: "13722494908"
            }
        },
        {
            path: "/404",
            component: NotFound,
            name: '404'
        },
        {
            path: "*",
            redirect: "/404"
        }

    ]

    // 3.创建路由对象

    const router = new VueRouter({
        routes,
    })

    // 挂载到根实例
    const vm = new Vue({
        router,
        el: "#app",
        data: {
            title: "Vue 路由的初步学习 "
        },
        watch: {
            '$route': function (to, from) {
                console.log(to)   // 即将进入的路由
                console.log(from) // 即将离开的路由 
            }
        },
        mounted() {
            console.log(this.$router)  // router 路由对象  负责路由切换 重定向
            console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
        }


    })
</script>

<!-- 
    Vue 路由是用来实现单页面应用的
    routes 会根据不同的path 去映射不同的 组件，然后渲染组件到router-view

    动态路由 == 路由参数传递（动态路径参数）

    动态路由匹配 2中  ?id=1903 :(冒号)
    a.?id=1903  问好拼接的参数 表示查询参数（search ?id=1903） (query id=1903)
    b.:冒号声明  params 路由参数
    /users/:uid     /users/1001     /users/1002  $route.params.uid 
    /users/:uname?   /users/ming  /users/55k   $route.params.uname  

    ?表示这个是一个未知的参数 三目   传

    $route      路由对象属性
    $route.query    一个key/value对象，表示url 查询参数（？）
    $route.params   一个key/value对象，获取路由参数（：）
    $route.name     当前路由的名称
    $route.path     对应当前路由的路径，总是解析为决定路径
    $route.hash     当前路由的hash值（带#）,如果没有hash值，则为空字符串
    $route.fullPath 完成解析后的url，包含查询参数和hash的完整路径
    $route.meta     路由标记信息

    name 命名路由
    通过一个名称来标识一个路由
    :to="{name:'users',params:{uid:1002}}"

    匹配优先级
    同一个路径可以匹配多个路由  匹配的优先级就按照路由的定义顺序：
    谁先定义的，谁的优先级就高

    路由重定向  url一定会改变
    www.baidu.com ==> ww.zouzhaoxi.xom
    {path:"*",redirect:{name:"404"}}

    路由别名  第二个名称  缺点 没有高亮
    path="/admin"
    alias="/administrator"

    router-link 的 高亮 path    

 -->

</html>